import React, { useRef, useState } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import { Text, Box, Sphere, Cylinder, Cone } from '@react-three/drei';
import type { DatingProfile } from '../types';
import * as THREE from 'three';

interface MaleCharacterProps {
  profile: DatingProfile;
  position: [number, number, number];
  onClick: () => void;
  scale?: number;
}

export const MaleCharacter3D: React.FC<MaleCharacterProps> = ({
  profile,
  position,
  onClick,
  scale = 1
}) => {
  const characterRef = useRef<THREE.Group>(null);
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);
  const { camera } = useThree();

  // Animation
  useFrame((state) => {
    if (characterRef.current) {
      // Subtle breathing effect
      const breathScale = 1 + Math.sin(state.clock.elapsedTime * 1.5) * 0.015;
      characterRef.current.scale.set(scale * breathScale, scale * breathScale, scale * breathScale);
      
      // Face the camera when hovered
      if (hovered && camera) {
        characterRef.current.lookAt(camera.position);
      }
    }
  });

  const handleClick = () => {
    setClicked(true);
    setTimeout(() => setClicked(false), 200);
    onClick();
  };

  const handlePointerOver = () => {
    setHovered(true);
    document.body.style.cursor = 'pointer';
  };

  const handlePointerOut = () => {
    setHovered(false);
    document.body.style.cursor = 'default';
  };

  // Male styling
  const skinColor = '#FDBCB4';
  const hairColor = '#4A4A4A';
  const shirtColor = '#4169E1';
  const pantsColor = '#2F2F2F';
  const shoeColor = '#000000';

  return (
    <group 
      ref={characterRef}
      position={position}
      onClick={handleClick}
      onPointerOver={handlePointerOver}
      onPointerOut={handlePointerOut}
    >
      {/* 男性身体构造 - 更宽的肩膀 */}
      
      {/* 身体躯干 - 梯形，肩膀宽 */}
      <group position={[0, 0.6, 0]}>
        <Box position={[0, 0.1, 0]} args={[0.45, 0.3, 0.2]} castShadow>
          <meshStandardMaterial color={shirtColor} />
        </Box>
        <Box position={[0, -0.15, 0]} args={[0.4, 0.25, 0.18]} castShadow>
          <meshStandardMaterial color={shirtColor} />
        </Box>
      </group>

      {/* 肌肉感的手臂 */}
      <Cylinder
        position={[-0.35, 0.7, 0]}
        args={[0.08, 0.06, 0.45]}
        rotation={[0, 0, 0.15]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Cylinder>
      <Cylinder
        position={[0.35, 0.7, 0]}
        args={[0.08, 0.06, 0.45]}
        rotation={[0, 0, -0.15]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Cylinder>

      {/* 大手 */}
      <Sphere position={[-0.45, 0.48, 0]} args={[0.08]} castShadow>
        <meshStandardMaterial color={skinColor} />
      </Sphere>
      <Sphere position={[0.45, 0.48, 0]} args={[0.08]} castShadow>
        <meshStandardMaterial color={skinColor} />
      </Sphere>

      {/* 直筒裤腿 */}
      <Cylinder
        position={[-0.12, 0.15, 0]}
        args={[0.08, 0.08, 0.3]}
        castShadow
      >
        <meshStandardMaterial color={pantsColor} />
      </Cylinder>
      <Cylinder
        position={[0.12, 0.15, 0]}
        args={[0.08, 0.08, 0.3]}
        castShadow
      >
        <meshStandardMaterial color={pantsColor} />
      </Cylinder>

      {/* 男式皮鞋 - 较大且方正 */}
      <Box position={[-0.12, 0.03, 0.08]} args={[0.15, 0.06, 0.25]} castShadow>
        <meshStandardMaterial color={shoeColor} metalness={0.3} />
      </Box>
      <Box position={[0.12, 0.03, 0.08]} args={[0.15, 0.06, 0.25]} castShadow>
        <meshStandardMaterial color={shoeColor} metalness={0.3} />
      </Box>

      {/* 头部 - 稍微方正的脸型 */}
      <Box
        position={[0, 1.05, 0]}
        args={[0.18, 0.22, 0.16]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Box>

      {/* 男士短发 */}
      <Box
        position={[0, 1.15, -0.05]}
        args={[0.19, 0.15, 0.18]}
        castShadow
      >
        <meshStandardMaterial color={hairColor} roughness={0.9} />
      </Box>

      {/* 面部特征 */}
      {/* 眼睛 */}
      <Box position={[-0.05, 1.08, 0.09]} args={[0.025, 0.015, 0.01]}>
        <meshStandardMaterial color="#000000" />
      </Box>
      <Box position={[0.05, 1.08, 0.09]} args={[0.025, 0.015, 0.01]}>
        <meshStandardMaterial color="#000000" />
      </Box>

      {/* 眉毛 - 较粗 */}
      <Box position={[-0.05, 1.12, 0.08]} args={[0.03, 0.008, 0.005]}>
        <meshStandardMaterial color={hairColor} />
      </Box>
      <Box position={[0.05, 1.12, 0.08]} args={[0.03, 0.008, 0.005]}>
        <meshStandardMaterial color={hairColor} />
      </Box>

      {/* 鼻子 - 更突出 */}
      <Box position={[0, 1.04, 0.1]} args={[0.02, 0.03, 0.02]} castShadow>
        <meshStandardMaterial color={skinColor} />
      </Box>

      {/* 嘴 */}
      <Box position={[0, 0.98, 0.08]} args={[0.04, 0.012, 0.005]}>
        <meshStandardMaterial color="#8B4513" />
      </Box>

      {/* 男士配件 - 手表 */}
      <Cylinder
        position={[-0.45, 0.52, 0]}
        args={[0.04, 0.04, 0.02]}
        rotation={[Math.PI / 2, 0, 0]}
        castShadow
      >
        <meshStandardMaterial color="#2F4F4F" metalness={0.9} />
      </Cylinder>

      {/* 领带 */}
      <Box position={[0, 0.75, 0.11]} args={[0.06, 0.3, 0.01]} castShadow>
        <meshStandardMaterial color="#8B0000" />
      </Box>

      {/* Hover name display */}
      {hovered && (
        <group position={[0, 1.5, 0]}>
          <Text
            fontSize={0.12}
            color="#4169E1"
            anchorX="center"
            anchorY="middle"
            castShadow
          >
            {profile.name}
          </Text>
          <Text
            position={[0, -0.15, 0]}
            fontSize={0.08}
            color="#666"
            anchorX="center"
            anchorY="middle"
          >
            {profile.age}岁 • {profile.occupation}
          </Text>
        </group>
      )}

      {/* Hover glow */}
      {hovered && (
        <Sphere position={[0, 0.6, 0]} args={[0.9]}>
          <meshLambertMaterial
            color="#4169E1"
            transparent
            opacity={0.1}
            side={THREE.BackSide}
          />
        </Sphere>
      )}

      {/* Click hearts */}
      {clicked && (
        <>
          {Array.from({ length: 5 }, (_, i) => (
            <Text
              key={i}
              position={[
                (Math.random() - 0.5) * 1.5,
                0.8 + Math.random() * 0.6,
                (Math.random() - 0.5) * 1.5
              ]}
              fontSize={0.15}
              color="#4169E1"
              anchorX="center"
              anchorY="middle"
            >
              💙
            </Text>
          ))}
        </>
      )}
    </group>
  );
};